<template>
       <div :class="statu?'switch active':'switch'" @click="totagel">
           <div  :class="statu?'bar active':'bar'"></div>
       </div>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
const statu = ref(false);
const emits  = defineEmits(['totagle'])
const totagel = ()=>{
    statu.value=!statu.value;
    emits('totagle',statu.value);
}

</script>

  <!--  -->


<style lang="less">
.switch{
      width: 30px;
      height: 17px;
      background-color: rgba(68, 68, 68, 0.699);
      border-radius: 30px;
      display: flex;
      align-items: center;
      padding: 0 .1rem;
      cursor: pointer;
      transition: all .2s ease-in 0s;
      &.active{
        background-color: #7cbffdb0;
         }
      .bar{
         width: 12px;
         height: 12px;
         border-radius: 50%;
         border: 1px solid #fff;
         background-color: transparent;
         transition: all .2s ease-in 0s;
         transform: translateX(0);
         &.active{
            transform: translateX(16px);
            border: 1px solid #fff;
            background-color: #fff;
         }
      }

}
</style>
